//获取待读列表 ul
const list = document.querySelector("#book-list ul");
// 创建书籍名称、删除按钮元素
const li = document.createElement("li");
const bookName = document.createElement("span");
const deleteBtn = document.createElement("span");
// 将书籍名称添加到 span 文字内容中
bookName.textContent = value;
// 修改按钮显示文字
deleteBtn.textContent = "删除";
//添加一些 class
bookName.classList.add("name");
deleteBtn.classList.add("delete");
// 将书籍名称和删除按钮加入到 li
li.appendChild(bookName);
li.appendChild(deleteBtn);
// 把 li 加入到 list
list.appendChild(li);
//提交表单
//const addForm = document.querySelector("form#add-book");
//监听提交表单提交事件
//addForm.addEventListener("submit", (event)=>{
//拦截表单提交行为
event.preventDefault();
//获取输入框对象，在 addForm 对象中找 input
const bookInputEle = addForm.querySelector("input[type='text']");
//获取输入框内容
const bookName = bookInputEle.value
console.log("输入的书名是：", bookName)
// 创建书籍名称、删除按钮元素
const liElement = document.createElement("li");
const bookNameElement = document.createElement("span");
const deleteBtnElement = document.createElement("span");
// 将书籍名称添加到 span 文字内容中
bookNameElement.textContent = bookName;
// 修改按钮显示文字
deleteBtnElement.textContent = "删除";
//添加一些 class
bookNameElement.classList.add("name");
deleteBtnElement.classList.add("delete");
// 将书籍名称和删除按钮加入到 li
liElement.appendChild(bookNameElement);
liElement.appendChild(deleteBtnElement);
// 把 li 加入到 list
list.appendChild(liElement);
const BookNameHTML = `<span class="name">${ bookName }</span>`;
const newBookItemHTML = `
<li>
${ BookNameHTML }
<span class="delete">删除</span>
</li>
`;
list.insertAdjacentHTML('beforeend', newBookItemHTML); // Adjacent [əˈdʒeɪsnt]
console.log("hello")
const searchBar = document.querySelector("#search-books input");
// 在监听搜索框内键盘按下的事件
searchBar.addEventListener("keyup", (event) => {
	console.log(event)
	console.log(event.target.value)
});//给 ul 绑定点击事件
list.addEventListener("click", (e) => {
//判断点击的是删除按钮
// e.target 是实际相应事件的元素，这里我们点击的是删除按钮
if (e.target.className == "delete") {
//获取点击按钮所在 li
const li = e.target.parentElement;
//删除单个书籍
li.remove()
}
});
//隐藏书籍单选框对象
//const hideBox = document.querySelector("#hide");
//捕捉 change 单选框状态改变事件
//hideBox.addEventListener("change", ()=> {
//获取单选框状态值
//const addForm = document.querySelector("form#add-book");
console.log("勾选了隐藏所有书籍", hideBox.checked)
if (hideBox.checked) {
list.style.display = "none";
} else {
list.style.display = "initial";
}
addForm.addEventListener("submit", (event)=>{ 
	//停止默认的表单提交
    event.preventDefault();
})
const addForm = document.querySelector("form#add-book");

addForm.addEventListener("submit", (e)=>{
	//拦截表单提交行为
    e.preventDefault();
    
    //获取输入框对象，在 addForm 对象中找 input
    //bookInputEle = document.querySelector("form input[type='text']");
    const bookInputEle = addForm.querySelector("input[type='text']");
    	
	//获取输入框内容
    const bookName = bookInputEle.value
    console.log("输入的书名是：", bookName)
})
// <input type="checkbox" id="hide" />
const hideBox = document.querySelector("#hide");

//捕捉 change 单选框状态改变事件
hideBox.addEventListener("change", ()=> {
    //获取单选框状态值
    console.log("勾选了隐藏所有书籍", hideBox.checked)
});
const tab_btn = document.querySelectorAll(".tab-buttons li");
//在页面上找到 tab 
const tab_buttons = document.querySelector(".tab-buttons");
//在页面上找到 两个显示内容
const tab_contents = document.querySelectorAll(".tab-content");

// 给 tab添加点击事件监听，如果 tab的内容被点击了，会这个函数
tab_buttons.addEventListener("click", (event) => {
    //点击的元素是 li 
    if (event.target.tagName == "LI") {
        // 切换tab 页面的 active 状态
        tab_lis.forEach((i) => i.classList.toggle("active"));
    }
});
tab_buttons.addEventListener("click", (e) => {

    //点击的元素是 li 
    if (e.target.tagName == "LI") {
        // 切换tab 页面的 active 状态
        tab_btn.forEach((i) => i.classList.toggle("active"));

        //获取当前被点击的关联的是哪块内容
        const target_content = document.querySelector(e.target.dataset.target);

        //循环所有展示容器
        Array.from(tab_contents).forEach((content) => {
            //展示容器和点击查询出来的容器相符，添加 active 状态
            //不是则移除 active 状态
            if (content == target_content) {
                content.classList.add("active");
            } else {
                content.classList.remove("active");
            }
        });
    }
});
// 搜索框输入事件
//const searchBar = document.querySelector("#search-books input");
searchBar.addEventListener("keyup", (e) => {
console.log("事件：", e)
console.log("输入框内容：",e.target.value)
//页面上的所有书籍
const books = document.querySelectorAll("#book-list ul li");
//将books转为数组，使用 forEach 循环
Array.from(books).forEach((book) => {
//获取单本书结构中的书名
const title = book.firstElementChild.textContent;
//判断书名和输入框的内容时候有相同的内容
if (title.toLowerCase().indexOf(e.target.value) != -1) {
//有相同的关键字，显示为 flex布局
book.style.display = "flex";
} else {
//没有找到相同的关键字，隐藏
book.style.display = "none";
}
});
});